<template>
  <div class="app-container recovery">
    <!-- 查询和其他操作 -->
    <div class="filter-container search">
      <div>
        <el-input v-model="listQuery.title" clearable class="" style="width: 180px;" placeholder="请输入媒体名称"/>
      </div>
      <div>
        <el-select v-model="listQuery.type" placeholder="请选择媒体类型" style="width:150px;">
          <el-option
            v-for="item in MeterialClipTypeContants"
            :key="item.key"
            :label="item.value"
            :value="item.key"/>
        </el-select>
      </div>
      <div>
        <el-select v-model="listQuery.source" placeholder="请选择来源" style="width:130px;" clearable>
          <el-option
            v-for="item in sourceFormat"
            :key="item.key"
            :label="item.value"
            :value="item.key"/>
        </el-select>
      </div>
      <div>
        <el-cascader
          v-model="cateList"
          :options="cateOptions"
          :props="{
            expandTrigger: 'hover',
            value:'id',
            label:'name',
          }"
          placeholder="请选择分类"
          clearable
        />
      </div>
      <el-date-picker
        v-model="listQuery.beginTime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="date"
        style="width:150px;"
        placeholder="选择开始日期"/>
      <el-date-picker
        v-model="listQuery.endTime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="date"
        style="width:150px;"
        placeholder="选择结束日期"/>
      <div class="buttonGroup">
        <el-button class="filter_button" icon="el-icon-search" @click="handleFilter">查找</el-button>
        <el-button class="filter_button" @click="refresh">重置</el-button>
      </div>
    </div>
    <!-- 查询结果 -->
    <MCTable :data-source="dataSource"/>
    <pagination :total="total" :page.sync="page" :limit.sync="listQuery.limit" @pagination="sizeChange" />
  </div>
</template>
<script>

import BackToTop from '../../../components/BackToTop'
import Pagination from '../../../components/Pagination'
import { apiMeterial } from '../../../api/mediaManage/index'
import Fn from '../../../utils/fn'
import tagButton from '../../../components/common/tagButton'
import tableColumns from './columnsData/recoveryColums'
import { sourceFormat, MeterialClipTypeContants } from '../../../mixin/MixinContants'
export default {
  name: 'Recovery',
  inject: ['reload'],
  components: { BackToTop, Pagination, tagButton },
  mixins: [
    sourceFormat.mixin,
    MeterialClipTypeContants.mixin
  ],
  data() {
    return {
      dataSource: {
        headerLines: 1,
        list: [],
        columns: tableColumns,
        operates: {
          fixed: 'right',
          width: '250',
          list: [
            { label: '恢复', type: 'warning', show: (row) => (true),
              method: (index, row) => {
                this.handleedit(row.id, row.auditStatus)
              }
            },
            { label: '删除', type: 'danger', show: (row) => (true),
              method: (index, row) => {
                this.handledel(row.id)
              }
            }
          ]
        }
      },
      // 分类表
      cateOptions: [],
      // 搜索绑定的分类
      cateList: [],
      page: 1,
      total: 0,
      // 列表和搜索参数
      listQuery: {
        page: 1,
        limit: 20,
        title: undefined,
        beginTime: undefined,
        endTime: undefined,
        source: undefined,
        cateOne: undefined,
        cateTwo: undefined,
        type: undefined,
        inTrash: 1
      }
    }
  },
  created() {
    this.Init()
  },
  methods: {
    // 获取关联的分类信息
    relationCategory() {
      return new Promise((resolve, reject) => {
        apiMeterial.relationCategory().then(res => {
          if (res.data.resp_code == 0) {
            this.cateOptions = this.formatList(res.data.datas)
            resolve(res.data.datas)
          } else {
            this.toast.fail(res.data.resp_msg)
            reject(res.data)
          }
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: (response.data.resp_msg || {})['errmsg'] || '请联系系统管理员'
          })
          reject(response)
        })
      })
    },
    /**
     * 格式化分类数据
     * @argument type 1[[...],[...]] to 一级:[],二级:[]  2一级:[],二级:[] to [[...],[...]]
    */
    formatCate(type, cateList) {
      let cateInfo = null
      let filterData = null
      if (type == 1) {
        filterData = [...new Set([].concat(...cateList))]
        cateInfo = { cateOneList: [], cateTwoList: [] }
        filterData.forEach(item => {
          this.cateOptions.forEach(cate => {
            if (item == cate.id) {
              cateInfo.cateOneList.push({ ...cate })
            } else {
              cate.children && cate.children.forEach(c => {
                if (item == c.id) {
                  cateInfo.cateTwoList.push({ ...c })
                }
              })
            }
          })
        })
      } else {
        cateInfo = []
        cateList && cateList.forEach(item => {
          item.children.forEach(c => {
            cateInfo.push([item.id, c.id])
          })
        })
      }
      return cateInfo
    },
    // tree结构格式化，去二级children
    formatList(list) {
      list.forEach(item => {
        item.children.forEach(c => {
          c.children = undefined
        })
      })
      return list
    },
    sizeChange(val) {
      this.listQuery.limit = val.limit
      this.getList()
    },
    // 重置页面
    refresh() {
      this.reload()
    },
    // 恢复
    handleedit: Fn.Confirm(function(id, status) {
      let auditStatus
      status == 1 ? auditStatus = 1 : auditStatus = 0
      apiMeterial.inTrash({ id, inTrash: 0, auditStatus }).then(res => {
        if (res.data.resp_code === 0) {
          this.toast.success('恢复成功')
          this.getList()
        }
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: (response.data.resp_msg || {})['errmsg'] || '请联系系统管理员'
        })
      })
    }, '确认恢复？'),
    // 删除
    handledel: Fn.Confirm(function(id) {
      apiMeterial.delListData({ id }).then(res => {
        if (res.data.resp_code === 0) {
          this.toast.success('删除成功')
          this.getList()
        } else {
          this.toast.fail(res.data.resp_msg)
        }
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: (response.data.resp_msg || {})['errmsg'] || '请联系系统管理员'
        })
      })
    }, '确认删除？'),
    // 初始化页面
    Init() {
      this.getList()
      this.relationCategory()
    },
    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      if (this.cateList.length != 0) {
        this.listQuery.cateOne = this.cateList[0] || ''
        this.listQuery.cateTwo = this.cateList[1] || ''
      }
      this.getList()
    },
    // 列表数据
    getList() {
      this.$set(this.dataSource, 'options', { loading: true })
      this.listQuery.page = this.page
      apiMeterial.list({ ...this.listQuery }).then(res => {
        if (res.data.resp_code === 0) {
          this.dataSource.list = res.data.datas.list || []
          this.total = Number(res.data.datas.total)
        } else {
          this.toast.fail(res.data.resp_msg)
        }
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: (response.data.resp_msg || {})['errmsg'] || '请联系系统管理员'
        })
      }).finally(() => {
        this.$set(this.dataSource, 'options', { loading: false })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
  .recovery{
    .search{
      // display: flex;
      // align-items: center;
      div{
        display: inline-block;

      }
    }
    .content{
      width:100%;
      height:auto;
      display: flex;
      justify-content: space-around;
      .left,.right{
        border:1px solid #ccc;
        // flex: 1;
        margin:0 10px;
        padding:15px;

      }
      .left{
        width:30%;
        .list{
          p{
            overflow: hidden;
            padding:10px 6px;
            & span:first-child{
              float: left;
            }
            & span:last-child{
              float: right;
            }
            // display: flex;
            // justify-content: space-around;
          }
        }
      }
      .right{
        width:60%;
        .list{
          width:100%;
          p{
            overflow: hidden;
            padding:10px 6px;
            width:100%;
            display: flex;
            justify-content: space-around;
          }
        }
      }
    }
    .dialog{
      .item{
        margin:10px 0;

      }
      .cate{
        display: flex;
        flex-wrap: wrap;
        // align-items: center;
        .cate_list{
          display: flex;
          flex-wrap: wrap;
          .list{
            display: flex;
            // flex-direction: column;
            justify-content: center;
            align-items: center;
            .select{
              width:150px;
              margin-right: 10px;
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
</style>
